import  { useState } from 'react'
import {connect, ConnectedProps} from 'react-redux'
import {searchAction} from '../../redux/actions/search'

const connector = connect(
  // {}, // error 当UI组件不需要一般属性时, 不能传入{}, 要传入null
  null,
  {dispatchSearch: searchAction}
)

function SearchHeader ({dispatchSearch}: ConnectedProps<typeof connector>) {

  const [searchName, setSearchName] = useState('')

  const search = () => {
    // 分发异步action
    dispatchSearch(searchName)
  }

  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input value={searchName} onChange={e => setSearchName(e.target.value)} type="text" placeholder="enter the name you search"/>
        <button onClick={search}>Search</button>
      </div>
    </section>
  )
}

export default connector(SearchHeader)